<template>
  <div class="main">
    <div class="school-wrapper">
      <headerBack></headerBack>
      <scroller>

        <div class="major-box">
          <div style="height:1rem"></div>
          <div class="majors">
            <span @click="handleClick(i)" class="flex-h" v-for="i in majorLists" :key="i">
              <b class="flex1">{{i}}</b>
              <i class="bg-right_icon_arrow"></i>
            </span>
          </div>
        </div>
      </scroller>
   
    </div>
    	<PopSelect ref="mychild" :yixuan='yxnum' :popupShow="isPopupShow" :placeholderText="plhdText" @closePopUp="changeStatus" @sendList="listContentChange"
		 :status='statu'></PopSelect>
  </div>
</template>

<script>
import ls from "store2";
import headerBack from "~/components/headerBack";
import countryData from "~/static/json/country.json";
import PopSelect from '~/components/PopSelect' 

import { getMajorStair } from "~/api/selectCourse";
export default {
  data() {
    return {
      plhdText:'test,',
      yxnum: 0,
      isPopupShow: false,
      statu: '',
      listArr: [],
      majorLists:[]

    };
  },
  components: {
    headerBack,
    PopSelect
  },
 
  mounted() {
    this.$visit(this.$route.path)
    this.getMajorStair()
  },
  methods: {
    getMajorStair(){
      getMajorStair().then(res=>{
        if(res.code=='0'){
          this.majorLists = res.data
        }
      }).finally(()=>{

      })
    },
    handleClick(names){	
      // this.isPopupShow = true;		
      this.$router.push({path:'addMajor?majorNames='+names})
			this.statu = this.modelType
			this.xxxNum = this.$store.state.xxNum
              // this.$refs.mychild.getMajorData("");
  },
    
 	changeStatus() {
				this.isPopupShow = false;
      },
      		listContentChange(arr) {
				for (const item of arr) {
					if (this.listArr.indexOf(item) == -1) {
						this.listArr.push(item);
					}
				}
				this.isPopupShow = false;
			}
  },
 
};
</script>

<style lang="less" scoped>
.school-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.major-box{
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
  .majors{
    span{
      width: 100%;
      height:1.12rem;
      background:rgba(255,255,255,1);
// box-shadow:0px -1px 0px 0px 
      border-bottom:1px solid rgba(229,232,237,1);
    }
 
  }
}
</style>
